<template>
  <div class="class_help">
    <el-card class="noDo">
      <el-row type="flex">
        <el-col :span="6" class="title">系统动态</el-col>
        <el-col :span="4" :offset="14" style="cursor: pointer">
          <span
            @click="
              () => {
                $router.push('/allHelp');
              }
            "
            >查看全部></span
          >
        </el-col>
      </el-row>
      <div style="height: 260px">
        <!-- <el-scrollbar style="height:100%;"> -->
        <el-row v-for="item in list" :key="item.id" style="margin: 5px 0px">
          <el-col
            :span="15"
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            "
          >
            <span :title="item.logDesc" v-html="getHtml(item.logDesc)"></span>
          </el-col>
          <el-col :span="7" :offset="2">{{ item.addTime }}</el-col>
        </el-row>
        <!-- </el-scrollbar> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { opetateLogList } from "@/service/stageApi";
export default {
  name: "help",
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      opetateLogList({
        ps: 10,
        pn: 1,
        beginTime: undefined,
        endTime: undefined,
        keyword: undefined,
      }).then((res) => {
        if (res.code == 0) {
          this.list = res.data.records;
        } else {
          this.$message.error(`${res.message}`);
        }
      });
    },
    getHtml(str) {
      let start = str.indexOf("【");
      let end = str.indexOf("】");
      let newStr = "";
      if (start == -1 && end == -1) {
        let start = str.indexOf("[");
        let end = str.indexOf("]");
        // if (start == -1 && end == -1) {
        let newStart = str.substring(0, start);
        let newEnd = str.substring(end + 1, str.length);
        let content = str.substring(start, end + 1);
        newStr = `<div style='color:#909399'  >${newStart}<span style='color:#00b98d'>${content}</span>${newEnd}</div>`;
        // }
        //  else {
        //   let newStart = str.substring(0, start - 1);
        //   let newEnd = str.substring(end + 1, str.length);
        //   let content = str.substring(start, end + 3);
        //   newStr = `<div>${newStart}<span style='color:green'>${content}</span>${newEnd}</div>`;
        // }
      } else {
        let newStart = str.substring(0, start);
        let newEnd = str.substring(end + 1, str.length);
        let content = str.substring(start, end + 1);
        newStr = `<div style='color:#909399'  >${newStart}<span style='color:#00b98d'>${content}</span>${newEnd}</div>`;
      }
      return newStr;
    },
  },
};
</script>

<style lang="scss" scoped>
.plan {
  box-sizing: border-box;
  width: 100%;
  height: 153px;
  background: #fff;
}
.title {
  font-size: 18px;
  color: #303133;
  font-weight: bold;
}
</style>
<style  >
.class_help .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>